<template>
	<div class="login-wrap">
		<div class="ms-login">
      <div class="ms-title"><i><u>天下小说后台</u><br></i></div>
			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="username" >
						<template #prepend>
							<el-button  :icon="User" style="color: blue"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						type="password"
						placeholder="password"
						v-model="param.password"
						@keyup.enter="submitForm(login)"
					>
						<template #prepend>
							<el-button :icon="Lock" style="color:red"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button  @click="submitForm(login)" text><span style="color: #242f42 ">登录</span></el-button>
				</div>
<!--				<p class="login-tips">{{randVideo}}</p>-->
			</el-form>
		</div>
	</div>
  <div class="videoContainer">
    <video class="fullscreenVideo" id="bgVid" playsinline="" autoplay="" muted="" loop="">
<!--    <video class="fullscreenVideo" id="bgVid" >-->
      <source :src="randVideo" type="video/mp4">
    </video>
  </div>

</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue';
import { useTagsStore } from '../store/tags';
import { usePermissStore } from '../store/permiss';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { Lock, User } from '@element-plus/icons-vue';
import {adminLogin} from "../api";
import { ElLoading } from 'element-plus'

interface LoginInfo {
	username: string;
	password: string;
}

const router = useRouter();
const param = reactive<LoginInfo>({
	username: 'admin',
	password: 'admin'
});

const rules: FormRules = {
	username: [
		{
			required: true,
			message: '请输入用户名',
			trigger: 'blur'
		}
	],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
};
const permiss = usePermissStore();
const login = ref<FormInstance>();
const randVideo = ref<string>();
const random = (min:any,max:any) => Math.floor(Math.random() * (max - min + 1) + min)

onMounted(()=>{
  randVideo.value = `http://rqwd8bfn0.hd-bkt.clouddn.com/bk${random(1, 5)}.mp4`
  console.log(randVideo.value)
}


)

const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (valid) {
      adminLogin(param.username,param.password).then(res => {
        //加载
        const loading = ElLoading.service({
          lock: false,
          text: '正在加载，请稍后。。',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        //   if (res.data.code == 200){
        //
        //     ElMessage.success('登录成功');
        //     localStorage.setItem('ms_username', param.username);
        //     const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
        //     permiss.handleSet(keys);
        //     localStorage.setItem('ms_keys', JSON.stringify(keys));
        //
        //     router.push('/');
        //
        //   } else{
        //     ElMessage.error('登录失败');
        //     return false;
        //   }
        // loading.close()

        // 加载太快就延迟一会 这样观感较好
        setTimeout(() => {
          console.log(res)
          //登录
          if (res.data.code == 200){
            ElMessage.success('登录成功');
            localStorage.setItem('ms_username', param.username);
            const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
            permiss.handleSet(keys);
            localStorage.setItem('ms_keys', JSON.stringify(keys));
            router.push('/');
          } else{
            ElMessage.error('登录失败');
            return false;
          }
          loading.close()
        }, 500)

      })


		} else {
			ElMessage.error('登录失败');
			return false;
		}
	});
};

const tags = useTagsStore();
tags.clearTags();
</script>

<style scoped>
/*.login-wrap {*/
/*	position: relative;*/
/*	width: 100%;*/
/*	height: 100%;*/
/*	background-image: url(../assets/img/login-bg.jpg);*/
/*	background-size: 100%;*/
/*}*/

.videoContainer{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
}

.videoContainer:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
  background: rgba(25,29,34,.65);
}

.ms-title {
	width: 100%;
	line-height: 50px;
	text-align: center;
	font-size: 30px;
	color: #fff;
	border-bottom: 1px solid #ddd;
  text-shadow: 0 0 2px black;
  /*color: white;*/
}
.ms-login {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 350px;
	margin: -190px 0 0 -175px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}
.ms-content {
	padding: 30px 30px;
}
.login-btn {
	text-align: center;
}
.login-btn button {
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
}
.login-tips {
	font-size: 12px;
	line-height: 30px;
	color: #fff;
}
</style>
